<template>
  <div class="home">
    <my-header>
      <template #left>
        <span></span>
      </template>
      <template #title>
        <span>用户登陆</span>
      </template>
      <template #button>
        <span @click="changeColor">切换主题</span>
      </template>
    </my-header>
    <div class="con">
      <my-input label="手机号码" v-model="tel" @blur="telBlur">
        <template v-if="telTrue != undefined">
          <span v-if="telTrue">✅</span>
          <span v-else>❌</span>
        </template>
      </my-input>

      <my-input label="密码" v-model="pass" @blur="passBlur">
        <template v-if="passTrue != undefined">
          <span v-if="passTrue">✅</span>
          <span v-else>❌</span>
        </template>
      </my-input>

      <button
        :disabled="!(telTrue && passTrue)"
        class="button"
        v-bg
        @click="$router.push('/about')"
      >
        登陆
      </button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

import myInput from "@/components/myInput.vue";

export default {
  name: "HomeView",
  components: {
    myInput,
  },
  data() {
    return {
      tel: "",
      telTrue: undefined,
      pass: "",
      passTrue: undefined,
    };
  },
  methods: {
    telBlur() {
      let regTel = /^1[3,5,6,7,8,9]\d{9}$/;
      this.telTrue = regTel.test(this.tel);
    },
    passBlur() {
      let regPass = /^[a-zA-Z][a-zA-Z0-9]{5}$/;
      this.passTrue = regPass.test(this.pass);
    },
    changeColor() {
      this.$store.commit("changeColor");
    },
  },
  // directives: {
  //   bg(el) {
  //     el.style.backgroundColor = "red";
  //   },
  // },
};
</script>
<style lang="scss" scoped>
.home {
  .con {
    width: 80%;
    margin: 100px auto;
    // text-align: center;
    .button {
      width: 60%;
      height: 40px;
      margin: 20px auto;
      display: block;
    }
  }
}
</style>
